<template>
  <transition
    enter-active-class="animated fadeIn"
    leave-active-class="animated fadeOut">
    <div class="book-speak-mask-wrapper"
         @click.stop.prevent="hide"
         v-show="visible">
      <transition
        enter-active-class="animated slideInUp"
        leave-active-class="animated slideOutDown">
        <div class="book-speak-mask-card-wrapper"
             v-show="speakCardVisible">
          <div class="pullDown-icon-wrapper" @click="hide">
            <span class="iconfont">&#xe79f;</span>
          </div>
          <div class="card-title-wrapper">
            <div class="icon-speak-wrapper">
              <span class="icon-speak iconfont">&#xe60e;</span>
            </div>
            <div class="speak-title-wrapper">
              <span class="speak-title">{{$t('speak.voice')}}</span>
            </div>
            <div class="read-fulltext-wrapper">
              <span class="read-fulltext">{{$t('speak.read')}}</span>
            </div>
          </div>
          <div class="card-section-title-wrapper">
            <div class="card-section-title-text">{{title}}</div>
            <div class="card-section-sub-title-text" v-if="currentSectionIndex">{{currentSectionIndex}} / {{currentSectionTotal}}
            </div>
          </div>
          <div class="setting-progress">
            <div class="progress-wrapper">
              <input class="progress" type="range"
                     max="100"
                     min="0"
                     step="1"
                     @change="onProgressChange($event.target.value)"
                     @input="onProgressInput($event.target.value)"
                     :value="progress"
                     ref="progress">
            </div>
            <div class="progress-text">
              <div class="progress-text-current">{{playInfo ? playInfo.currentMinute : '00'}}:{{playInfo ? playInfo.currentSecond : '00'}}
              </div>
              <div class="progress-text-left">-{{playInfo ? playInfo.leftMinute : '00'}}:{{playInfo ? playInfo.leftSecond : '00'}}
              </div>
            </div>
          </div>
          <div class="playing-wrapper">
            <div class="icon-settings-wrapper">
              <span class="iconfont icon-settings">&#xe60d;</span>
              <div class="settings-text">{{$t('speak.settings')}}</div>
            </div>
            <span class="icon-play_backward iconfont"
                  :class="{'not-use': currentSectionIndex <= 1}"
                  @click.stop.prevent="prev">&#xe8ec;</span>
            <div class="icon-play-wrapper" @click.stop.prevent="togglePlay">
              <span class="icon-play_go iconfont" v-if="!isPlaying">&#xe66a;</span>
              <span class="icon-play_pause iconfont" v-else>&#xe78e;</span>
            </div>
            <span class="icon-play_forward iconfont"
                  :class="{'not-use': currentSectionIndex >= currentSectionTotal}"
                  @click.stop.prevent="next">&#xeb4a;</span>
            <div class="icon-clock-wrapper">
              <span class="icon-clock iconfont">&#xe76e;</span>
              <div class="clock-text">{{$t('speak.timing')}}</div>
            </div>
          </div>
          <div class="read-apply-wrapper">
            {{$t('speak.apply')}}
          </div>
          <div class="read-title-wrapper">
            <span class="line"></span>
            <div class="read-title-text">{{$t('speak.current')}}</div>
            <span class="line"></span>
          </div>
          <!--          电子书挂载-->
          <div class="book-wrapper" ref="bookWrapper">
            <div id="book-read"></div>
          </div>
        </div>
      </transition>
    </div>
  </transition>
</template>

<script>
import { realPx } from '../../utils/utils'

export default {
  name: 'SpeakMask',
  props: {
    title: String,
    book: Object,
    section: Object,
    currentSectionIndex: Number,
    currentSectionTotal: Number,
    isPlaying: Boolean,
    playInfo: Object
  },
  data () {
    return {
      visible: false,
      speakCardVisible: false,
      progress: 0,
      readHeight: 0
    }
  },
  methods: {
    // 由于科大讯飞的在线语音合成，有字数限制，所以要控制好范围，这是采取控制电子书渲染的区域来控制字数
    updateText (promise) {
      promise.then(() => {
        const currentPage = this.rendition.currentLocation()
        const cfiBase = this.section.cfiBase
        const cfiStart = currentPage.start.cfi.replace(/.*!/, '').replace(/\)/, '')
        const cfiEnd = currentPage.end.cfi.replace(/.*!/, '').replace(/\)/, '')
        this.book.getRange(`epubcfi(${cfiBase}!,${cfiStart},${cfiEnd})`).then(range => {
          let text = range.toString()
          text = text.replace(/\s(2,)/g, '')
          text = text.replace(/\r/g, '')
          text = text.replace(/\n/g, '')
          text = text.replace(/\t/g, '')
          text = text.replace(/\f/g, '')
          this.$emit('updateText', text)
        })
      })
    },
    togglePlay () {
      this.$parent.togglePlay()
    },
    // 上一页
    prev () {
      if (this.currentSectionIndex > 1) {
        // 更新文本
        this.updateText(this.rendition.prev())
        // 更新索引
        this.$emit('update:currentSectionIndex', this.currentSectionIndex - 1)
        // 重置音频
        this.$parent.resetPlay()
        // 500毫秒后继续播放
        setTimeout(() => {
          this.$parent.togglePlay()
        }, 500)
      }
    },
    // 下一页
    next () {
      if (this.currentSectionIndex < this.currentSectionTotal) {
        // 翻开下一页，返回一个Promise对象，让文本接着执行
        this.updateText(this.rendition.next())
        this.$emit('update:currentSectionIndex', this.currentSectionIndex + 1)
        this.$parent.resetPlay()
        setTimeout(() => {
          this.$parent.togglePlay()
        }, 500)
      }
    },
    // 渲染
    display () {
      if (!this.rendition) {
        this.rendition = this.book.renderTo('book-read', {
          width: window.innerWidth > 640 ? 640 : window.innerWidth,
          height: this.readHeight,
          method: 'default'
        })
        this.displayed = this.rendition.display(this.section.href)
      } else {
        this.displayed = this.rendition.display(this.section.href)
      }
    },
    // 进度百分百更新，控制css样式
    refreshProgress (p) {
      this.progress = p
      this.$refs.progress.style.backgroundSize = `${this.progress}% 100%`
    },
    onProgressChange (progress) {
    },
    // 拖动进度条改变样式
    onProgressInput (progress) {
      this.progress = progress
      this.$refs.progress.style.backgroundSize = `${this.progress}% 100%`
    },
    hide () {
      this.speakCardVisible = false
      this.visible = false
    },
    show () {
      this.visible = true
      this.speakCardVisible = true
      this.refresh()
      this.$nextTick(() => {
        this.display()
      })
    },
    // 刷新组件高度
    refresh () {
      this.readHeight = window.innerHeight * 0.9 - realPx(40) - realPx(54) - realPx(46) - realPx(48) - realPx(60) - realPx(44)
      this.$refs.bookWrapper.style.height = this.readHeight + 'px'
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '../../assets/styles/global.styl'
  .book-speak-mask-wrapper
    position: fixed
    left: 0
    top: 0
    z-index: 112
    width: 100%
    height: 100%
    background: rgba(0, 0, 0, .5)
    .book-speak-mask-card-wrapper
      position: absolute
      bottom: 0
      left: 0
      z-index: 120
      width: 100%
      height: 90%
      background: white
      border-radius: px2rem(10) px2rem(10) 0 0
      .pullDown-icon-wrapper
        width: 100%
        height: px2rem(40)
        color: #ccc
        font-size: px2rem(40)
        center()
      .card-title-wrapper
        width: 100%
        height: px2rem(54)
        display: flex
        padding: 0 px2rem(15)
        box-sizing: border-box
        .icon-speak-wrapper
          flex: 0 0 px2rem(40)
          leftStyle()
          .icon-speak
            font-size: px2rem(24)
            color: #999
        .speak-title-wrapper
          flex: 1
          leftStyle()
          .speak-title
            font-size: px2rem(16)
            font-weight: bold
            color: #666
        .read-fulltext-wrapper
          flex: 1
          rightStyle()
          .read-fulltext
            font-size: px2rem(12)
            font-weight: bold
            color: $color-blue
            background: rgba(74, 171, 255, .2)
            padding: px2rem(5) px2rem(10)
            box-sizing: border-box
            border-radius: px2rem(20)
      .card-section-title-wrapper
        width: 100%
        height: px2rem(46)
        padding: 0 px2rem(15)
        box-sizing: border-box
        .card-section-title-text
          font-size: px2rem(16)
          color: #333
          font-weight: bold
        .card-section-sub-title-text
          font-size: px2rem(12)
          color: #666
          margin-top: px2rem(5)
          center()
      .setting-progress
        width: 100%
        height: px2rem(48)
        columnTop()
        .progress-wrapper
          flex: 1
          width: 100%
          center()
          padding: 0 px2rem(30)
          box-sizing: border-box
          .progress
            width: 100%
            -webkit-appearance: none
            height: px2rem(2)
            background: -webkit-linear-gradient($color-blue, $color-blue) no-repeat, rgba(74, 171, 255, .2)
            background-size: 0 100%
            &:focus
              outline: none
            &:-webkit-slider-thumb
              -webkit-appearance: none
              height: px2rem(20)
              width: px2rem(20)
              border-radius: $color-blue
              border: none
              box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .15)
        .progress-text
          display: flex
          width: 100%
          padding: 0 px2rem(30)
          box-sizing: border-box
          .progress-text-current
            flex: 1
            text-align: left
            font-size: px2rem(10)
            color: #666
          .progress-text-left
            flex: 1
            text-align: right
            font-size: px2rem(10)
            color: #666
      .playing-wrapper
        width: 100%
        height: px2rem(60)
        center()
        .icon-settings-wrapper
          flex: 1
          columnCenter()
          .icon-settings
            font-size: px2rem(18)
            color: #666
          .settings-text
            margin-top: px2rem(5)
            font-size: px2rem(10)
            color: #666
        .icon-play_backward
          font-size: px2rem(30)
          color: $color-blue
          &:active
            opacity: .5
          &:not-use
            color: $color-blue-transparent
        .icon-play-wrapper
          flex: 0 0 px2rem(100)
          center()
          &:active
            opacity: .5
          .icon-play_go
            font-size: px2rem(50)
            color: $color-blue
          .icon-play_pause
            font-size: px2rem(50)
            color: $color-blue
        .icon-play_forward
          font-size: px2rem(30)
          color: $color-blue
          &:active
            opacity: .5
          &:not-use
            color: $color-blue-transparent
        .icon-clock-wrapper
          flex: 1
          columnCenter()
          .icon-clock
            font-size: px2rem(18)
            color: #666
          .clock-text
            margin-top: px2rem(5)
            font-size: px2rem(10)
            color: #666
      .read-apply-wrapper
        width: 100%
        height: px2rem(20)
        font-size: px2rem(10)
        color: $color-green
        center()
      .read-title-wrapper
        width: 100%
        height: px2rem(24)
        box-sizing: border-box
        center()
        .line
          flex: 1
          border-top: px2rem(1) solid #eee
          height: 0
        .read-title-text
          flex: 0 0 px2rem(130)
          font-size: px2rem(14)
          color: #666
          text-align: center
      .book-wrapper
        #book-read
          width: 100%
          height: 93.5px
</style>
